<template>
  <div>
    <kendoForm :kendo-form-items="kendoFormItems" :kendo-form="kendoForm" :kendo-params-value="kendoParamsValue" />
  </div>
</template>

<script>
  import kendoForm from '@/Views/components/kendo-vue-component/kendoForm/index.vue'
  import { isEmpty } from '@/Utils/strUtil.js'
  export default {
    name: 'ReqmntFpDetail',
    components: {
      kendoForm
    },
    data() {
      return {
        dialogName: this.$attrs.data.dialogName,
        kendoFormItems: [
          {
            name: 'reqNo',
            label: '需求编号',
            paramName: 'reqNo',
            required: true,
            readonly: true,
            editDisabled: true,
            viewDisabled: true,
            controlType: 'input'
          },
          {
            genre: 'special',
            name: 'fpName',
            label: '功能点名称',
            paramName: 'fpName',
            required: true,
            viewDisabled: true,
            controlType: 'textarea'
          },
          {
            ref: 'FP_TYPE_CD',
            remoteData: true,
            cascade: true,
            name: 'fpType',
            label: '功能点类别',
            paramName: 'fpType',
            optionLabel: '--请选择--',
            controlType: 'dropDownList',
            filter: 'contains',
            dataType: 'json',
            transportReadUrl: '/service/sysMng/dict/findDictByTypeWithForm',
            required: true,
            autoBind: true,
            viewDisabled: true,
            schema: {
              data: function(response) {
                return response.data
              }
            },
            dataMapping: {
              label: 'dictValNm',
              value: 'dictVal'
            },
            parameterMap: function(options, operation) {
              if (operation !== 'read' && options.models) {
                // eslint-disable-next-line no-undef
                return { models: kendo.stringify(options.models) }
              } else {
                // eslint-disable-next-line no-undef
                return kendo.stringify({ dict: 'FP_TYPE_CD' })
              }
            }
          },
          {
            ref: 'FC_DIVISION_CD',
            remoteData: true,
            cascade: true,
            name: 'fcDivision',
            label: '功能性划分',
            paramName: 'fcDivision',
            optionLabel: '--请选择--',
            controlType: 'dropDownList',
            filter: 'contains',
            dataType: 'json',
            transportReadUrl: '/service/sysMng/dict/findDictByTypeWithForm',
            required: true,
            autoBind: true,
            viewDisabled: true,
            schema: {
              data: function(response) {
                return response.data
              }
            },
            dataMapping: {
              label: 'dictValNm',
              value: 'dictVal'
            },
            parameterMap: function(options, operation) {
              if (operation !== 'read' && options.models) {
                // eslint-disable-next-line no-undef
                return { models: kendo.stringify(options.models) }
              } else {
                // eslint-disable-next-line no-undef
                return kendo.stringify({ dict: 'FC_DIVISION_CD' })
              }
            }
          },
          {
            name: 'devInCharge',
            label: '开发负责人',
            paramName: 'devInCharge',
            required: true,
            viewDisabled: true,
            controlType: 'multiselect',
            // change: this.devInChargeChange,
            dataSource: 'PrjMemberDataSource',
            dataType: 'json',
            transportReadUrl: '/service/prjMng/prjMemberMng/findPrjMemberList',
            dataMapping: {
              label: 'memberName',
              value: 'memberNo'
            },
            autoBind: true,
            remoteData: true,
            schema: {
              data: function(response) {
                if (typeof response.data === 'object') {
                  if (JSON.stringify(response.data) === '{}') {
                    return []
                  }
                }
                return response.data
              }
            }
          },
          {
            id: 'editScheduledStartDt',
            name: 'scheduledStartDt',
            label: '计划开始日期',
            paramName: 'scheduledStartDt',
            controlType: 'datePicker',
            format: 'yyyy-MM-dd',
            viewDisabled: true,
            disableDates: this.startDtdisableDates,
            change: this.startChange
          },
          {
            id: 'editScheduledEndDt',
            name: 'scheduledEndDt',
            label: '计划结束日期',
            paramName: 'scheduledEndDt',
            controlType: 'datePicker',
            format: 'yyyy-MM-dd',
            viewDisabled: true,
            disableDates: this.endDtdisableDates,
            change: this.endChange
          },
          {
            label: '完成比例',
            name: 'cmplRate',
            paramName: 'cmplRate',
            required: true,
            viewDisabled: true,
            controlType: 'numeric',
            format: 'p2',
            min: 0,
            max: 1,
            step: 0.01,
            change: this.cmplRateChange
          },
          {
            ref: 'WHETHER_CMPL_CD',
            remoteData: true,
            cascade: true,
            name: 'whetherCmpl',
            label: '是否完成',
            paramName: 'whetherCmpl',
            optionLabel: '--请选择--',
            controlType: 'dropDownList',
            filter: 'contains',
            dataType: 'json',
            transportReadUrl: '/service/sysMng/dict/findDictByTypeWithForm',
            required: true,
            autoBind: true,
            readonly: true,
            viewDisabled: true,
            schema: {
              data: function(response) {
                return response.data
              }
            },
            dataMapping: {
              label: 'dictValNm',
              value: 'dictVal'
            },
            parameterMap: function(options, operation) {
              if (operation !== 'read' && options.models) {
                // eslint-disable-next-line no-undef
                return { models: kendo.stringify(options.models) }
              } else {
                // eslint-disable-next-line no-undef
                return kendo.stringify({ dict: 'WHETHER_CMPL_CD' })
              }
            }
          },
          {
            name: 'cmplDt',
            label: '完成日期',
            paramName: 'cmplDt',
            controlType: 'datePicker',
            format: 'yyyy-MM-dd',
            readonly: false
          },
          {
            ref: 'fpDetailReport',
            genre: 'special',
            name: 'fpDetailReport',
            label: '功能明细完成报告',
            paramName: 'fpDetailReport',
            required: true,
            editDisabled: true,
            controlType: 'editor',
            imageBrowser: {
              transport: {
                read: {
                  url: '/service/imageBrowser/read',
                  type: 'POST'
                },
                destroy: {
                  url: '/service/imageBrowser/destroy',
                  type: 'POST'
                },
                create: {
                  url: '/service/imageBrowser/create',
                  type: 'POST'
                },
                thumbnailUrl: '/service/imagePreview/thumbnail',
                uploadUrl: '/service/imageBrowser/upload',
                imageUrl: '/service/imagePreview/image?path={0}'
              },
              schema: {
                data: function(response) {
                  return response.data
                },
                model: {
                  id: 'id',
                  fields: {
                    name: 'materialName',
                    type: 'materialType',
                    size: 'materialSize'
                  }
                }
              }
            },
            tools: this.editorTools
          }
        ],
        kendoForm: {
          ref: 'ReqmntFpDetailForm',
          valid: 'valid',
          buttons: [
            {
              name: '保存', // 按钮内容
              class: 'k-primary', // 按钮样式
              icon: 'save',
              click: this.save
            },
            {
              name: '重置', // 按钮内容
              icon: 'reset-sm',
              click: this.reset
            }
          ],
          rules: {},
          message: {}
        },
        kendoParamsValue: {
          id: '',
          reqNo: '',
          preFpNo: '',
          fpNo: '',
          fpHierarchicalStructure: '',
          fpName: '',
          fpType: '',
          fcDivision: '',
          devInCharge: '',
          scheduledStartDt: '',
          scheduledEndDt: '',
          cmplRate: '',
          whetherCmpl: '',
          cmplDt: '',
          fpDetailReport: ''
        },
        fpdetailInfo: {

        }
      }
    },
    mounted() {
      // 初始化：设置计划开始时间及计划完成时间的可选用区间。
      // 如果是修改需求计划明细信息 根据当前节点编号查询详细信息。
      // 根据当前选择的节点，获取对应的详细信息。
      const { code } = this.$attrs.data.param
      this.initData(this.$attrs.data.param).then(_ => {
        if (Object.keys(this.fpdetailInfo).length === 0) {
          const { reqNo, scheduledStartDt, scheduledEndDt } = this.$attrs.data.param
          // 如果是根目录，获取需求任务的计划时间。
          if (scheduledStartDt && scheduledEndDt) {
            // eslint-disable-next-line no-undef
            const start = kendo.jQuery('#editScheduledStartDt').data('kendoDatePicker')
            // eslint-disable-next-line no-undef
            const end = kendo.jQuery('#editScheduledEndDt').data('kendoDatePicker')
            // eslint-disable-next-line no-undef
            start.min(kendo.parseDate(scheduledStartDt, 'yyyy-MM-dd'))
            // eslint-disable-next-line no-undef
            start.max(kendo.parseDate(scheduledEndDt, 'yyyy-MM-dd'))
            // eslint-disable-next-line no-undef
            end.min(kendo.parseDate(scheduledStartDt, 'yyyy-MM-dd'))
            // eslint-disable-next-line no-undef
            end.max(kendo.parseDate(scheduledEndDt, 'yyyy-MM-dd'))
          }
          this.$set(this.kendoParamsValue, 'preFpNo', reqNo)
          this.$set(this.kendoParamsValue, 'reqNo', reqNo)
        } else {
          const { reqNo, code, scheduledStartDt, scheduledEndDt } = this.fpdetailInfo
          if (scheduledStartDt && scheduledEndDt) {
            // eslint-disable-next-line no-undef
            const start = kendo.jQuery('#editScheduledStartDt').data('kendoDatePicker')
            // eslint-disable-next-line no-undef
            const end = kendo.jQuery('#editScheduledEndDt').data('kendoDatePicker')
            // eslint-disable-next-line no-undef
            start.min(kendo.parseDate(scheduledStartDt, 'yyyy-MM-dd'))
            // eslint-disable-next-line no-undef
            start.max(kendo.parseDate(scheduledEndDt, 'yyyy-MM-dd'))
            // eslint-disable-next-line no-undef
            end.min(kendo.parseDate(scheduledStartDt, 'yyyy-MM-dd'))
            // eslint-disable-next-line no-undef
            end.max(kendo.parseDate(scheduledEndDt, 'yyyy-MM-dd'))
          }
          this.$set(this.kendoParamsValue, 'preFpNo', code)
          this.$set(this.kendoParamsValue, 'reqNo', reqNo)
        }
      })
      const paramVal = {}
      this.$set(paramVal, 'fpNo', code)
      this.$post('/service/prjMng/reqmntFpDetail/getReqMntFpDetailInfo', paramVal).then(res => {
        if (res.code !== 200) {
          this.$KendoNotify({
            title: '错误信息:' + res.code,
            message: res.message
          }, 'error')
        } else {
          this.kendoParamsValue = Object.assign(this.kendoParamsValue, res.data)
          this.kendoFormItems.forEach(item => {
            // Array.isArray(this.kendoParamsValue[item.paramName])
            if (!isEmpty(this.kendoParamsValue[item.paramName]) &&
              typeof this.kendoParamsValue[item.paramName] === 'string' &&
              this.kendoParamsValue[item.paramName].split(',').length > 1) {
              this.$set(this.kendoParamsValue, item.paramName, this.kendoParamsValue[item.paramName].split(','))
            }
            if (item.editDisabled) {
              item['readonly'] = true
            }
          })
        }
      })
      this.kendoFormItems.forEach(item => {
        if (item.editDisabled) {
          item['readonly'] = true
        }
      })
      this.kendoForm = {
        ref: 'ReqmntFpDetailForm',
        valid: 'valid',
        buttons: [
          {
            name: '保存', // 按钮内容
            class: 'k-primary', // 按钮样式
            icon: 'save',
            click: this.save
          }
        ]
      }
    },
    methods: {
      async initData(param) {
        const { pCode } = param
        const paramVal = {}
        this.$set(paramVal, 'fpNo', pCode)
        await this.$post('/service/prjMng/reqmntFpDetail/getReqMntFpDetailInfo', paramVal).then(res => {
          if (res.code !== 200) {
            this.$KendoNotify({
              title: '错误信息:' + res.code,
              message: res.message
            }, 'error')
          } else {
            this.fpdetailInfo = Object.assign(this.fpdetailInfo, res.data)
          }
        })
      },
      save(paramVal, validator) {
        if (validator.validate()) {
          this.kendoFormItems.forEach(item => {
            if (Array.isArray(paramVal[item.paramName])) {
              this.$set(paramVal, item.paramName, paramVal[item.paramName].join(','))
            }
            if (item.viewDisabled) {
              item['disabled'] = true
            }
          })
          this.$post('/service/prjMng/reqmntFpDetail/recursiveUpdate', paramVal).then(res => {
            if (res.code !== 200) {
              this.$KendoNotify({
                title: '错误信息:' + res.code,
                message: res.message
              }, 'error')
            } else {
              this.$KendoNotify({
                title: '提示信息:',
                message: res.message
              }, 'success')
            }
          })
        }
      },
      reset(paramVal) {
        Object.keys(paramVal).forEach(key => {
          if (key !== 'reqNo') {
            if (Array.isArray(paramVal[key])) {
              this.kendoParamsValue[key] = []
            } else {
              this.kendoParamsValue[key] = ''
            }
          }
        })
      },
      // 计划开始日期+工作量 计算计划结束时间
      cmplRateChange(e) {
        // dateAddDays
        const maxVal = e.sender.options.max
        const val = e.sender.value()
        if (val === maxVal) {
          this.kendoParamsValue.whetherCmpl = '01'
          this.kendoParamsValue.cmplDt = new Date()
        } else {
          this.kendoParamsValue.whetherCmpl = '02'
          this.kendoParamsValue.cmplDt = ''
        }
      },
      startDtdisableDates(date) {
        // 调用远程接口获取需要禁止选择的日期
        console.log(this.dateFormat(date, 'yyyy-MM-dd'))
        // 例子
        // var disabled = [13, 14, 20, 21]
        // if (date && disabled.indexOf(date.getDate()) > -1) {
        //   return true
        // } else {
        //   return false
        // }
      },
      endDtdisableDates(date) {
        console.log(this.dateFormat(date, 'yyyy-MM-dd'))
      },
      startChange: function(e) {
        debugger
        // eslint-disable-next-line no-undef
        var start = kendo.jQuery('#editScheduledStartDt').data('kendoDatePicker')
        // eslint-disable-next-line no-undef
        var end = kendo.jQuery('#editScheduledEndDt').data('kendoDatePicker')
        var startDate = e.sender.value()
        var endDate = end.value()
        if (startDate) {
          startDate = new Date(startDate)
          startDate.setDate(startDate.getDate())
          end.min(startDate)
        } else if (endDate) {
          start.max(new Date(endDate))
        } else {
          endDate = new Date()
          start.max(endDate)
          end.min(endDate)
        }
      },
      endChange: function(e) {
        // eslint-disable-next-line no-undef
        var start = kendo.jQuery('#editScheduledStartDt').data('kendoDatePicker')
        // eslint-disable-next-line no-undef
        var end = kendo.jQuery('#editScheduledEndDt').data('kendoDatePicker')
        var endDate = e.sender.value()
        var startDate = start.value()
        if (endDate) {
          endDate = new Date(endDate)
          endDate.setDate(endDate.getDate())
          start.max(endDate)
        } else if (startDate) {
          end.min(new Date(startDate))
        } else {
          endDate = new Date()
          start.max(endDate)
          end.min(endDate)
        }
      }
    }
  }
</script>

<style>

</style>
